@import './mixins/mixins.scss';
@import './common/var.scss';

@include b(button-group) {
    display: inline-block;

    .el-button {
        margin-left: 0;

        //border raduis
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        &:first-child:last-child{
            border-radius: $--button-border-radius;

            &.is-round{
                border-radius: 20px;
            }

            &.is-circle{
                border-radius: 50%;
            }
        }

        //border
        &:first-child {
            border-right-color: rgba($--color-white, 0.5);
        }

        &:last-child {
            border-left-color: rgba($--color-white, 0.5);
        }

        &:not(:first-child):not(:last-child) {
            border-right-color: rgba($--color-white, 0.5);
            border-left-color: rgba($--color-white, 0.5);
        }

        &:not(:last-child){
            margin-right: -1px;
        }
    }
}